<script setup lang="ts">
import { ref, inject, Ref, onMounted } from 'vue';
import { EnumBjlResult } from '@/models/enums/EnumBjlResult';
import { showNotify, showConfirmDialog } from 'vant';
import BjlInput from '@/components/Game/BjlInput.vue';

import dayjs from 'dayjs';
import { XueSyncDto, XueDetailDto } from '@/models/xue/XueSyncDto';
import { syncXue, getXueDetail } from '@/api/xue/XueApi'
import { AxiosError } from 'axios';
import { useRoute } from 'vue-router';

let route = useRoute();

/**
 * 显示底部菜单
 */
const showButton: Ref | null | undefined = inject("showButton");
if (showButton) showButton.value = false;

const resultInput = ref<any>(null);
/**
 * 事件
 */
let gameData: Ref<XueSyncDto> = ref(new XueSyncDto());

const initData = async () => {
  gameData.value = new XueSyncDto();
  gameData.value.code = dayjs(new Date()).format("YYYYMMDDHHmmssSSS");

  resultInput.value.initData();

  let id = route.query.id?.toString();
  if (id) {

    var data = await getXueDetail(id);
    if (!data) return;
    var resultList = [...data.details.map(x => x.result)];
    gameData.value = Object.assign(gameData.value, data);
    gameData.value.details = [];
    if (resultList.length > 0) {
      for (let i = 0; i < resultList.length; i++) {
        let ele = resultList[i];
        setResult(ele);
      }
    }
    console.log("snapShot = ",snapShot)
  }

  //statisticInfo.value = new XueStatistic();
};

onMounted(() => {
  initData();
})
let snapShot: any[] = [];

const setResult = (result: EnumBjlResult) => {
  let detail: XueDetailDto = new XueDetailDto();
  detail.createTime = new Date();
  detail.result = result;
  gameData.value.details.push(detail);
  resultInput.value.setResult(result);

  countInfo(result);
  snapShot.push(Object.assign({}, {
    zcount: gameData.value.zcount,
    xcout: gameData.value.xcount,
    lz: gameData.value.lz,
    lx: gameData.value.lx,
    lzmax: gameData.value.lzmax,
    lxmax: gameData.value.lxmax
  }));
};

const countInfo = (result: EnumBjlResult) => {
  if (result == EnumBjlResult.Z) {
    gameData.value.zcount++;
    gameData.value.lz++;
    gameData.value.lx = 0;
  }
  else if (result == EnumBjlResult.X) {
    gameData.value.xcount++;
    gameData.value.lx++;
    gameData.value.lz = 0;
  }
  else { }

  if (gameData.value.lx > gameData.value.lxmax) {
    gameData.value.lxmax = gameData.value.lx;
  }
  if (gameData.value.lz > gameData.value.lzmax) {
    gameData.value.lzmax = gameData.value.lz
  }
};
const kZ = function () {
  setResult(EnumBjlResult.Z);
}
const kX = function () {
  setResult(EnumBjlResult.X);
}
const revert = () => {
  snapShot.pop();
  var obj = snapShot[snapShot.length - 1];
  if (obj) Object.assign(gameData.value, obj)
  else {
    gameData.value.zcount = 0;
    gameData.value.xcount = 0;
    gameData.value.lzmax = 0;
    gameData.value.lxmax = 0;
    gameData.value.details = [];
  }

  gameData.value.details.pop();
  resultInput.value.revert();

};
const syncData = () => {

  if(gameData.value.details.length == 0){
    showNotify({ type: 'warning', message: '未录入数据' });
    return;
  }

  showConfirmDialog({
    title: '确认',
    message: '确认同步数据？',
  }).then(async () => {
    // on confirm
    await syncXue(gameData.value);
    showNotify({ type: 'success', message: '同步成功' });
    initData();
  }).catch((err: AxiosError) => {
    // on cancel
    showNotify({ type: 'primary', message: err.message });
  });

};
</script>

<template>
  <van-row>
    <BjlInput ref="resultInput" />
  </van-row>
  <van-row class="operate">
    <van-col :span="6">
      <button class="BX" @click="kX">〇</button>
    </van-col>
    <van-col :span="6">
      <button class="revert" @click="revert">撤销</button>
    </van-col>
    <van-col :span="6">
      <button class="restart" @click="initData">重开</button>
    </van-col>
    <van-col :span="6">
      <button class="BZ" @click="kZ">〇</button>
    </van-col>
  </van-row>
  <van-row>
    <van-col class="st" :span="24" style="text-align: center;">当前：{{ gameData.details.length }}</van-col>
  </van-row>
  <van-row>
    <van-col class="st" :span="6"><span style="color:red">庄：</span>{{ gameData.zcount }}</van-col>
    <van-col class="st" :span="6"><span style="color:blue">闲：</span>{{ gameData.xcount }}</van-col>
    <van-col class="st" :span="6"><span style="color:red">连续庄：</span>{{ gameData.lzmax }}</van-col>
    <van-col class="st" :span="6"><span style="color:blue">连续闲：</span>{{ gameData.lxmax }}</van-col>
  </van-row>
  <van-row class="operate" style="margin-top:50px;">
    <van-col style="text-align: center;" :span="24">
      <button class="BSync" @click="syncData">同步</button>
    </van-col>
  </van-row>
</template>

<style scoped>
.st {
  font-size: 16px;
  text-align: center;
  height: 30px;
  line-height: 30px;
}

.operate {
  text-align: center;
  height: auto;
  margin: 5px 0;
}

div.Z {
  border: 3px solid red;
}

div.X {
  border: 3px solid blue;
}

div.B {
  border: 3px solid rgb(6, 237, 83);
}

.operate button,
.operate_button button {
  font-size: 12px;
  color: white;
  border: none;
  margin: 5px 15px;
  padding: 10px;
}

.BZ {
  background-color: #ae2a2a;
  color: red !important;
}

.BX {
  background-color: #2a71ae;
  color: blue !important;
}

.BSync {
  background-color: coral;
  color: white;
}

.revert {
  background-color: #c0c0c0;
}

.change {
  background-color: darkgoldenrod;
}

.restart {
  background-color: rgb(244, 0, 252);
}

.changetable {
  background-color: cadetblue;
}
</style>